<template>
  <div class="HomeView">
    <HeaderView></HeaderView>
    <Swiper :swiperList="swiperList"></Swiper>
    <NavBar></NavBar>
    <HotBang :hotList="hotList"></HotBang>
    <GuessLike :likeList="likeList"></GuessLike>
  </div>
</template>

<script>

import HeaderView from './components/HeaderView.vue'
import Swiper from './components/Swiper.vue'
import NavBar from './components/NavBar.vue'
import HotBang from './components/HotBang.vue'
import GuessLike from './components/GuessLike.vue'
import axios from 'axios'
export default {
  name: 'HomeView',
  data() {
    return {
      swiperList:[],
      hotList:[],
      likeList:[]
    }
  },
  components: {
    HeaderView,
    Swiper,
    NavBar,
    HotBang,
    GuessLike
  },
  methods:{
    getIndexData() {
      axios.get('/static/mock/index.json')
      .then(res => {
        this.swiperList = res.data.data.swiperList;
        this.hotList = res.data.data.recommendList;
        this.likeList = res.data.data.weekendList;
      })
    },
    getCity() {
      if(localStorage.getItem('city')) {
        this.city = localStorage.getItem('city')
      }
    }
  },
  mounted() {
    this.getIndexData()
    this.getCity()
  },
  updated() {
    this.getCity()
  }
}
</script>
